<template>
  <div class="panel-view not-select" v-if="show" :style="{left:`${position.x + 10}px`,top:`${position.y + 10}px`}">
    <ul>
      <li v-for="item in plist" :key="item.value" @click="triggerBtn(item.value)">{{ item.label }}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator'
@Component({})
export default class Panel extends Vue {
  //面板是否展示
  @Prop(String) show!: Boolean;
  //面板位置
  @Prop(Object) position!: any;
  //当前节点数据
  @Prop(Object) currentData!: any;

  get plist(){
    const temp1 = {
      value:1,
      label:'新增'
    }
    const temp2 = {
      value:2,
      label:'编辑'
    }
    const temp3 = {
      value:3,
      label:'删除'
    }
    const temp4 = {
      value:4,
      label:'上传'
    }
    const temp5 = {
      value:5,
      label:'移动到...'
    }
    if(this.currentData.mainId === 1){
      return [temp1, temp2];
    }else if(this.currentData.type === 1){
      return [temp1, temp2, temp3, temp4, temp5]
    }else{
      return [temp2, temp3, temp5];
    }
  }

  triggerBtn(type){
    this.$emit('update:show',false);
    this.$emit('callback',this.currentData, type);
  }
}
</script>

<style lang="less" scoped>
  .panel-view{
    width:100px;
    position:absolute;
    background-color:#fff;
    ul{
      margin:0;
      border:1px solid #B5B5B5;
      padding: 5px 0;
      border-radius: 7px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      background: #EFEFEF;
      li{
        line-height:26px;
        cursor:pointer;
        font-size:14px;
        list-style-type:none;
        transition: background-color 1ms;
        text-align: left;
        padding: 0 10px;
        &:hover{
          background-color:#459DFD;
          color:#fff;
        }
      }
    }
  }
</style>

